<html>
  <head>
    <title>My registration form</title>
    <link rel="stylesheet" href="css/site.css">
   
   <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
   
   <script type="text/javascript" src="js/jquery.validate.js"></script>
   
   <script type="text/javascript" src="js/jquery.register.js"></script>
   <style>
   input.error{
   color:pink;
   }
   .error {
    color: red;
    float: left;
    margin-left: 11px;
   }
   </style>
   
    </head>

  <body>
    <form id="registerId">
      <table cellpadding="0" cellspacing="0" border="1" width="80%" align="center">
        <thead>
          <tr>
            <th colspan="2">Please fill the details below</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td align="right" width="40%">Name :</td>
            <td width="60%"><input placeholder="my name is"      type="text" name="uname"></td>
          </tr>

          <tr>
            <td align="right">Email :</td>
            <td><input  placeholder="My Email is" type="email" name="email"></td>
          </tr>

          <tr>
            <td align="right">Password :</td>
            <td><input  placeholder="My Password is" id="passwordId" type="password" name="password"></td>
          </tr>

          <tr>
            <td align="right">Confirm Password :</td>
            <td><input  placeholder="Same as above" type="password" name="conPassword"></td>
          </tr>

          <tr>
            <td align="right">Date of Birth :</td>
            <td><input  placeholder="YYYY-MM-DD" type="date" name="dob"></td>
          </tr>

          <tr>
            <td align="right">Gender:</td>
            <td>
<label style="float:left"><input  type="radio" name="gender">Male</label>
<label style="float:left"><input  type="radio" name="gender">Female</label>
<label style="float:left" for="gender" class="error"></label>
            </td>
          </tr>

          <tr>
            <td align="right">Address:</td>
            <td>
            <textarea  name="address" placeholder="My Address is"></textarea>
            </td>
          </tr>
          <tr>
            <td align="right">Country:</td>
            <td>
            <select  name="country">
              <option value="">-SELECT-</option>
              <option value="in">India</option>
              <option value="pk">Pakistan</option>
              <option value="np">Nepal</option>
              <option value="sl">Srilanka</option>
              <option value="ch">China</option>
            </select>
            </td>
          </tr>

          <tr>
            <td align="right">Languages:</td>
            <td>
            <select  name="lang[]" multiple="true" size="5">
              <option value="hi">Hindi</option>
              <option value="en">English</option>
              <option value="tm">Tamil</option>
              <option value="bn">Bengali</option>
              <option value="gj">Gujrati</option>
            </select>
            </td>
          </tr>

          <tr>
            <td align="right">Hobbies:</td>
            <td>
<label><input  type="checkbox" name="hobbies[]">Cricket</label><br>
<label><input  type="checkbox" name="hobbies[]">Hockey</label><br>
<label><input  type="checkbox" name="hobbies[]">Football</label><br>
<label><input  type="checkbox" name="hobbies[]">Chess</label><br>
<label><input  type="checkbox" name="hobbies[]">Badminton</label>
<label for="hobbies[]" class="error"></label>
            </td>
          </tr>

          <tr>
            <td align="right">Avatar :</td>
            <td><input type="file" name="avatar" placeholder="Please upload">
          </tr>

          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="submit" value="I am done!!">
          </tr>


        </tbody>
      </table>
    </form>
  </body>
</html>
